<template>
	<view class="shop">
		<!-- 店铺地址 -->
		<view class="addressBox flex-r-b-c">
			<view class="address_l" @tap="goAddress">
				<view class="title">{{address.shop_name}}</view>
				<view class="address flex-r-b-c">
					<view class="text one-line-ellipsis" v-if="address.receipt_address">{{address.receipt_address}} {{address.address}}</view>
					<view class="text one-line-ellipsis" v-else>{{address.address}}</view>
					<u-icon name="arrow-right" size="24" color="#7F8084"></u-icon>
				</view>
				<!-- <view class="info flex-r-s-c">
					<view class="name">{{address.user_name?address.user_name:address.name}} </view>
					<view class="" style="width: 12rpx;">
						
					</view>
					<view class="tel"> {{address.mobile}}</view>
				</view> -->
			</view>
			<view class="address_r flex-r-c-c">
				<button open-type="contact" hover-class='none'>
					<image src="/static/shop/kf.png" mode=""></image>
				</button>
			</view>
		</view>
		<!-- 背景图 -->
		<view class="swiperBox">
			<image :src="img+'assets/web_img/friendship.png'" mode=""></image>
		</view>
		<!-- 会员 -->
		<view class="memberBox flex-r-b-c" @tap.stop="goMsember"  v-if="lvl != 1">
			<view class="member_l flex-r-s-c">
				<image src="/static/my/hyhgbj.png" mode=""></image>
				<view class="member_l_r">
					<view class="title">墨典奶茶餐厅…</view>
					<view class="text">加入会员享好礼</view>
				</view>
			</view>
			<view class="member_r">加入会员</view>
		</view>
		<!-- 商品列表 -->
		<view class="listBox">

			<view class="list flex-r-b-c" v-for="(item,index) in list" :key="index">
				<image :src="item.imgs" mode=""></image>
				<view class="list_r">
					<view class="name">{{item.name}}</view>
					<view class="text one-line-ellipsis">{{item.content}}</view>
					<view class="moneyBox flex-r-b-c">
						<view class="money">¥{{item.price}}</view>
						<view class="btn" @tap="specifications(item)">规格</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 提示栏 -->
		<view style="width: 100%; text-align: center; font-size: 28rpx; margin-top: 30rpx;">{{isText}}</view>
		<view style="width: 100%; height: 80rpx;"></view>


		<!-- 规格弹框 -->
		<u-popup v-model="show" closeable mode="center" width="90%" height="90%" border-radius="40" @close="popClose">
			<view class="popupBox">
				<view class="imgBox">
					<image :src="img + specificationsData.imgs" mode=""></image>
				</view>
				<view class="title">{{specificationsData.name}}</view>
				<view class="introduce">{{specificationsData.content}}</view>

				<view class="list" v-for="(item,index) in specificationsData.test" :key="index">
					<view class="list_t">{{item.name}}</view>
					<view class="list_b flex-r-s-c">
						<view class="item" v-for="(items,indexs) in item.child" :key="indexs"
							:class="items.td == 1 ? 'selected' : '' " @tap="select(items,index)">
							{{items.name}}
						</view>
					</view>
				</view>

				<view class="btnBox">
					<view class="btn_t flex-r-b-c">
						<view class="text">¥{{price}}</view>
						<view class="quantity flex-r-c-c">
							<image src="/static/shop/jian.png" mode="" @tap="plusReduce(1)"></image>
							<view class="number">{{num}}</view>
							<image src="/static/shop/jia.png" mode="" @tap="plusReduce(2)"></image>
						</view>
					</view>
					<view class="specifications">{{text}}</view>
					<view class="btn" @tap="confirmOrder">确定</view>
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				img: this.$base.smallimgUrl,
				image: '',
				lng: '',
				lat: '',
				page: 1,
				list: [],
				address: {},
				isText: '',
				specificationsData: {},
				price: '',
				text: '',
				num: 1,
				child: [],
				shop_id: '',
				gid: '',
				shop_id: '',
				name:'',
				picture:'',
				lvl:'',
			};
		},
		onLoad(e) {
			this.lvl = uni.getStorageSync('userInfo').lvl
			this.getMyData()
		},
		onShow() {
			this.getAddress()
			this.lvl = uni.getStorageSync('userInfo').lvl
			this.page = 1
			this.list = []
			this.isText = ''
			this.show = false
			this.specificationsData = {}
			this.child = []
		},
		methods: {
			getMyData(){
				let that = this
				that.$api.member().then(res => {
					that.myData = res.data.data
					// console.log(that.myData,'that.myData')
					uni.setStorageSync('userInfo',that.myData)
				})
			},
			// 获取点餐地址
			getdcAddress(e){
				let that = this
				that.$api.dcAddress({
					lng: that.lng,
					lat: that.lat,
				}).then(res => {
					if(uni.getStorageSync('myAddress')){
						console.log('我的地址存在')
						that.address = uni.getStorageSync('myAddress')
						that.address.shop_name = uni.getStorageSync('shop_name')
						that.shop_id = uni.getStorageSync('shop_id')
						that.getShopData()	
					}else if(uni.getStorageSync('shopAddress')){
						that.address = uni.getStorageSync('shopAddress')
						that.address.user_name = uni.getStorageSync('userInfo').nickname
						that.address.mobile = uni.getStorageSync('userInfo').mobile
						that.shop_id = that.address.shop_id
						that.getShopData()	
					}else{
						that.address = res.data.data
						that.shop_id = res.data.data.shop_id
						that.getShopData()
					}
				}) 
			},
			// 获取定位
			getAddress(e) {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success(res) {
						that.lng = res.longitude
						that.lat = res.latitude
						uni.setStorageSync('location', {
							lng: that.lng,
							lat: that.lat
						})
						
						that.getdcAddress(e)
					},
					fail: function (e) {
					  uni.showModal({
					    title: "请求授权当前位置",
					    content: "我们需要获取地理位置信息，为您推荐附近的店面",
					    success: (res) => {
					      if (res.confirm) {
					        uni.openSetting().then((res) => {
					          if (res[1].authSetting["scope.userLocation"] === true) {
					            uni.getLocation({
					              type: "wgs84",
					              success: function (res) {
					                resolve(res);
					              },
					            });
					          } else {
					            uni.showToast({
					              title: "您拒绝了授权当前位置",
					            });
					          }
					        });
					      } else if (res.cancel) {
					        uni.showToast({
					          title: "您拒绝了授权当前位置",
							});
					      }
					   },
				      });
				    },
			    });
			},
			
			
			// 获取点餐数据
			getShopData() {
				let that = this
				that.$api.dcGoodsList({
					shop_id: that.shop_id, 
					page: that.page,
				}).then(res => {
					res.data.data.list == 0 ? that.isText = '暂无数据' : that.isText = ''
					that.list = that.list.concat(res.data.data.list)
				})
			},
			isSelect(){
				let that = this
				that.specificationsData.test.forEach(item => {
					item.child.forEach(e => {
						if(e.td == 1){
							that.child.push(e.id)
						}
					})
				})
				console.log(that.child,'that.child1')
			},
			// 点击选中的规格
			select(el, index) {
				let that = this
				that.specificationsData.test[index].child.forEach(e => {
					if (e.choose == 0) { // 判断是否是多选       0代表多选  1代表单选
						if (e.id == el.id) { // 点击选择当前规格    1代表选中
							e.td != 1 ? e.td = 1 : e.td = 2    
							if (e.td == 1) { // 添加 规格 ID
								that.child.push(e.id)
							} else { // 删除 规格 ID
								that.child.forEach((v, i) => {
									if (v == e.id) {
										that.child.splice(i, 1)
									}
								})
							}
							
						}
					} else { // 单选
						if (e.id == el.id) { // 选中
							if(e.td == 1){ // 已经选中后 再次点击 取消
								e.td = 2
								that.child.forEach((v, i) => {
									if (v == e.id) {
										that.child.splice(i, 1)
									}
								})
							} else { // 点击选中
								e.td = 1
								that.child.push(e.id)
							}
						} else { // 未选中
							e.td = 2
							// console.log(e)
							that.child.forEach((v,i) => {
								if(v == e.id){
									that.child.splice(i, 1)
								}
							})
						}
					}
				})
				// console.log(that.child,'that.child2')
				that.calculationPrice()
			},
			
			// 规格数量加减
			plusReduce(type){
				let that = this
				if(type == 1){ 
					that.num == 1 ? that.num = 1 : that.num--
				} else {
					that.num++
				}
				that.calculationPrice()
			},

			// 点击跳转地址列表
			goAddress() {
				let data = {
					shop_id: this.shop_id,
					lng: this.lng,
					lat: this.lat,
				}
				uni.navigateTo({
					url: '/pages/shop/address/address?data=' + JSON.stringify(data)
				})
			},
			// 点击规格
			specifications(el) {
				this.shop_id = el.shop_id
				this.goods_id = el.id
				this.getGoodDetile()
				this.calculationPrice()
				this.show = true
			},

			// 规格详情
			getGoodDetile() {
				let that = this
				that.$api.goodsDetails({
					shop_id: that.shop_id,
					goods_id: that.goods_id,
				}).then(res => {
					that.name =  res.data.data.name
					that.picture = res.data.data.imgs
					that.specificationsData = res.data.data
					that.isSelect()
					that.calculationPrice()
				})
			},
			// 计算价格
			calculationPrice(shop_id,gid) {
				let that = this
				that.$api.calculation({
					goods_id: that.goods_id,
					shop_id: that.shop_id,
					num: that.num,
					child: that.child.toString()
				}).then(res => {
					that.price = res.data.data.goods_price.toFixed(2)
					
					res.data.data.minitype.length == 0 ? that.text = '暂无' : that.text = res.data.data.minitype.join('-')
				})
			},
			// 关闭弹框
			popClose(){
				this.num = 1
				this.child = []
				this.shop_id = ''
				this.gid = ''
			},
			// 点击确定订单
			confirmOrder(){
				let res = {
					goods_id: this.goods_id,
					shop_id: this.shop_id,
					num: this.num,
					name: this.name,
					picture: this.picture,
					child: this.child.toString()
				}
				uni.navigateTo({
					url: '/pages/shop/confirmOrder/confirmOrder?res=' + JSON.stringify(res)
				})
			},
			
			// 加入会员
			goMsember(){
				uni.navigateTo({
					url: '/pages/my/member/member'
				})
			}
		},
		onReachBottom() {
			let that = this
			if (that.isText == '') {
				that.page = that.page + 1
				that.getShopData()
			}
		}
	}
</script>

<style lang="less">
	.shop {
		width: 100vw;

		.addressBox {
			width: 95%;
			margin: 30rpx auto;

			.address_l {
				width: 74%;

				.title {
					font-size: 400;
					font-size: 28rpx;
				}

				.address {
					margin-top: 10rpx;
					color: #7F8084;
					font-size: 24rpx;
					font-weight: 400;
				}

				.info {
					font-size: 24rpx;
					font-weight: 400;
					color: #7F8084;
					margin-top: 10rpx;
				}
			}

			.address_r {
				width: 20%;

				button {
					width: 64rpx;
					height: 60rpx;
					margin: 0;
					padding: 0;
					border: none;
					background: #fff;

					image {
						width: 100%;
						height: 100%;
					}
				}

				button::after {
					border: none;
				}
			}
		}

		.swiperBox {
			width: 98%;
			height: 358rpx;
			margin: 30rpx auto;
			border-radius: 20rpx;
			overflow: hidden;
			image {
				width: 100%;
			}
		}

		.memberBox {
			width: 95%;
			margin: 0 auto;
			height: 136rpx;
			border-radius: 10rpx;
			padding: 0rpx 30rpx;
			background-color: #F9F9F9;

			.member_l {
				width: 65%;

				image {
					width: 96rpx;
					height: 96rpx;

				}

				.member_l_r {
					margin-left: 20rpx;
					font-weight: 400;
					font-size: 28rpx;

					.text {
						font-size: 24rpx;
						color: #7F8084;
						margin-top: 6rpx;
					}
				}
			}

			.member_r {
				width: 25%;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				color: #fff;
				font-size: 24rpx;
				font-weight: 400;
				background-color: #000;
				border-radius: 60rpx;
			}
		}

		.listBox {
			width: 95%;
			margin: 30rpx auto;

			.list {
				width: 100%;
				padding: 30rpx 0rpx;
				border-bottom: 1px solid #EFEFEF;

				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 20rpx;
				}

				.list_r {
					width: 75%;

					.name {
						font-size: 28rpx;
						font-weight: 400;
					}

					.text {
						font-size: 24rpx;
						font-weight: 400;
						margin-top: 10rpx;
					}

					.moneyBox {
						margin-top: 20rpx;

						.money {
							font-size: 28rpx;
							font-weight: 400;
						}

						.btn {
							width: 106rpx;
							height: 42rpx;
							background-color: #000;
							border-radius: 42rpx;
							color: #fff;
							font-size: 24rpx;
							font-weight: 400;
							text-align: center;
							line-height: 42rpx;
						}
					}
				}
			}
		}

		.popupBox {
			width: 100%;
			padding: 30rpx;
			position: relative;

			.imgBox {
				width: 100%;
				text-align: center;
				margin-top: 20rpx;

				image {
					width: 264rpx;
					height: 264rpx;
					background-color: #000;
				}
			}

			.title {
				font-size: 32rpx;
				font-weight: 500;
				margin-top: 30rpx;
			}

			.introduce {
				font-size: 24rpx;
				font-weight: 400;
				color: #B6B6B6;
				margin-top: 30rpx;
			}

			.list {
				margin: 30rpx 0rpx;

				.list_t {
					font-size: 28rpx;
					font-weight: 400;
					margin-bottom: 20rpx;
				}

				.list_b {
					width: 100%;
					flex-wrap: wrap !important;

					.item {
						width: 166rpx;
						height: 48rpx;
						background: #F5F5F5;
						border-radius: 6rpx;
						text-align: center;
						line-height: 48rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #7F8084;
						margin: 0rpx 15rpx 20rpx 15rpx;
					}

					.selected {
						background: rgba(0, 0, 0, 0.2) !important;
						color: #000000;
					}
				}
			}

			.btnBox {
				width: 100%;
				height: 288rpx;
				background: #fff;
				box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.07);
				padding:0 20rpx;
				.btn_t {
					padding-top: 30rpx;

					.text {
						font-size: 32rpx;
						font-weight: 500;
					}

					.quantity {
						image {
							width: 36rpx;
							height: 36rpx;
						}

						.number {
							font-size: 32rpx;
							font-weight: 400;
							margin: 0rpx 30rpx;
						}
					}
				}

				.specifications {
					width: 100%;
					margin: 30rpx 0rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #7F8084;
				}

				.btn {
					width: 100%;
					height: 90rpx;
					line-height: 90rpx;
					border-radius: 90rpx;
					text-align: center;
					background-color: #000;
					color: #fff;
					font-size: 28rpx;
					font-weight: 500;
				}


			}



		}


	}
</style>
